<template>
  <transition appear name="header">
    <header :class="{ [$store.getters.isDay ? 'day' : 'night']: true }">
      <div class="box">
        <div class="row">
          <div class="left_title">
            <span class="title" @click="$router.push('/index')"
              >LITTLE FOX</span
            >
          </div>
          <div class="menu">
            <ul v-if="isShowMenu" class="max_ul_menu">
              <DayAndNight></DayAndNight>
              <li
                v-for="(item, index) in menuList"
                :key="index"
                @click="selectItem(item.path)"
                :class="{ 'menu-item': true, active: chose == item.path }"
              >
                <i :class="{ iconfont: true, [item.icon]: true }"></i>
                <span>{{ item.title }}</span>
              </li>
            </ul>
            <ul v-else class="min_ul_menu">
              <DayAndNight></DayAndNight>
              <el-dropdown
                trigger="click"
                @command="clickMenu"
                class="el-dropdown"
              >
                <i class="iconfont icon-menu"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in menuList"
                    :key="index"
                    :command="item.path"
                  >
                    <i :class="{ iconfont: true, [item.icon]: true }"></i>
                    <span>{{ item.title }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </ul>
          </div>
        </div>
        <div class="userinfo">
          <div class="user-container">
            <div class="class">
              <ul>
                <li
                  v-for="(item, index) in className"
                  :key="index"
                  @click="goClassDetail(item)"
                >
                  {{ item.class_name }}
                </li>
              </ul>
            </div>
            <div class="user">
              <div class="login" @click="$router.push('/login')" v-if="!$store.getters.isAuthenticated">
                <i class="iconfont icon-user"></i>
                <span>登录</span>
              </div>
              <div class="info" v-else @click="$router.push('/manage')">
                <i class="iconfont icon-user"></i>
                <span>你好</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </transition>
</template>

<script>
import DayAndNight from "./Day_Night.vue";
export default {
  name: "top",
  components: {
    DayAndNight,
  },
  data() {
    return {
      menuList: [
        {
          title: "首页",
          path: "/index",
          icon: "icon-shouye",
        },
        {
          title: "归档",
          path: "/class",
          icon: "icon-fenlei",
        },
        {
          title: "留言板",
          path: "/message",
          icon: "icon-liuyanban-05",
        },
        {
          title: "关于",
          path: "/info",
          icon: "icon-guanyu_o",
        },
      ],
      chose: this.$route.path,
      isShowMenu: true,
      screenWidth: null,
      className: {},
    };
  },
  mounted() {
    this.getArticleClass();
  },
  methods: {
    goClassDetail(info) {
      // console.log('11',info)
      const url = "/classDetail/" + info.class_name;
      this.$router.push({ path: url, target: '_blank' });
    },
    getArticleClass() {
      this.$axios.get("/api/class/getAll").then((res) => {
        const classList = res.data.doc.splice(0, 3);
        this.className = classList;
      });
    },
    handleClick(index, indexPath) {
      console.log(index);
    },
    selectItem(path) {
      console.log(this.$route);
      this.chose = path;
      console.log(this.chose);

      this.$router.push(path);
    },
    clickMenu(data) {
      console.log(data);
      this.$router.push(data);
    },
    goLogin() {
      this.$router.push("/login");
    },
  },
  created() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = function () {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        console.log(this.screenWidth);
        if (val < 750) {
          this.isShowMenu = false;
        } else {
          this.isShowMenu = true;
        }
      },
      // deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
@import "../assets/scss/night-header.scss";
header {
  width: 100%;
  height: 95px;
  position: sticky;
  left: 0;
  top: -60px;
  z-index: 999;
  font-family: Optima-Regular, Optima, -apple-system, system-ui, Segoe UI,
    Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
    Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
  background-color: #339999;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.5s;
  //解决移动端下拉时抖动的问题
  background-attachment:fixed;
  .box {
    width: 100%;
    margin: 0 auto;
    .userinfo {
      width: 100%;
      height: 35px;
      overflow: hidden;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      .user-container {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        transition: all 0.5s;
        .class {
          width: 70%;
          height: 100%;
          ul {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: left;
            align-items: center;

            li {
              // width: 45px;
              // height: 20px;
              text-align: center;
              line-height: 20px;
              color: #000;
              font-size: 13px;
              cursor: pointer;
              margin: 0 5px;
            }
            li:hover {
              color: rgba(47, 255, 172, 0.834);
            }
          }
        }
      }

      .user {
        width: 45px;
        height: 26px;
        float: right;
        text-align: center;
        line-height: 26px;
        color: #000;
        font-size: 13px;

        i {
        }
        span {
        }
      }
      .user:hover {
        color: rgba(47, 255, 172, 0.834);
      }
    }
    .row {
      width: 90%;
      height: 60px;
      display: flex;
      margin: 0 auto;
      transition: all 0.5s ease-in-out;
      padding: 0 15px;
      box-sizing: border-box;
      .left_title {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 50%;
        .title {
          height: 60px;
          line-height: 60px;
          // margin-right: 20px;
          color: #000;
          cursor: pointer;
          background: linear-gradient(to right, #9be3f0, #1bdbf4, #2df695);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          transition: all 0.5s ease-in-out;
          font-size: 1.5em;
          font-weight: bold;
        }
      }
      .menu {
        width: 50%;
        height: 60px;
        .max_ul_menu {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: right;
          align-items: center;
          flex-wrap: nowrap;
          padding: 0 15px;
          .menu-item {
            color: black;
            font-size: 14px;
            font-weight: 600;
            width: 70px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            margin: 5px;
            position: relative;
            transition: all 0.4s ease-in-out;
          }
          .menu-item::after {
            content: "";
            width: 0;
            height: 3px;
            position: absolute;
            left: 0;
            bottom: 0;
            transition: all 0.5s ease-in-out;
          }
          .menu-item:hover {
            color: rgba(47, 255, 172, 0.834);
          }
          .menu-item.active {
            color: rgba(47, 255, 172, 0.834);
          }
          .menu-item:hover:after {
            width: 100%;
            background-color: rgba(47, 255, 172, 0.834);
          }
          .menu-item.active:after {
            color: #fff;
            width: 100%;
            background-color: rgba(47, 255, 172, 0.834);
          }
        }
        .min_ul_menu {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          justify-content: right;
          align-items: center;
          flex-wrap: nowrap;
          overflow: hidden;

          .day_and_night {
            width: 56px;
            height: 26px;
          }
          .el-dropdown {
            i.iconfont.icon-menu {
              font-size: 26px;
              color: #000;
              font-weight: 600;
              margin-left: 15px;
            }
            .el-dropdown-menu {
              li.active {
                color: #fff;
                filter: drop-shadow(0 0 2px skyblue);
              }
            }
          }
        }
      }
    }
  }
}

.header-enter-active,
.header-leave-active {
  transition: all 1s ease-in-out;
}

.header-enter,
.header-leave-to {
  opacity: 0;
  transform: translateY(-95px);
}
.header-enter-to,
.header-leave {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 650px) {
  .row {
    width: 100% !important;
  }
  .user-container {
    width: 100% !important;
  }
}

</style>